<!DOCTYPE html>
<html>
<body>
<canvas width="50" height="640" id="bar"></canvas>
<script>
var disBar  = document.getElementById('bar'),
    ctx =disBar.getContext('2d');
     var r, g=100, b;
	r=0;
	b=256;
for(var i = 0; i <= 639; ) {
    ctx.beginPath();

    var color = 'rgb('+r+', ' + '0, ' + g + ')';
    ctx.fillStyle = color;
	r+=4;
	b-=4;
    
    ctx.fillRect(0, i, 50, 8);
	ctx.fillStyle = "#FFFFFF";
	i+=8;
	ctx.fillRect(0, i,  50, 2);
	i+=2;
	}
	console.log(b);

/*disBar.onclick = function(e) {
    var x = e.offsetX,
        y = e.offsetY,
        p = ctx.getImageData(x, y, 1, 1),
        x = p.data;
    
    alert('Color: rgb(' + x[0] + ', ' + x[1] + ', ' + x[2] + ')');
};*/
</script>
</body>
</html>
